<template>
  <div class="weather-dashboard">
    <!-- 顶部查询区域 -->
    <div class="header-section">
      <div class="search-container">
        <h2 class="title">
          <i class="fas fa-cloud-sun"></i>
          天气预报大屏
        </h2>
        <div class="search-controls">
          <!-- 城市搜索输入框 -->
          <div class="search-input">
             <el-input
               v-model="searchCity"
               placeholder="请输入城市名称（如：北京）"
               @keyup.enter="searchWeather"
               clearable
             >
              <template #prefix>
                <i class="fas fa-map-marker-alt"></i>
              </template>
            </el-input>
          </div>
          
          <!-- 气象类型选择 -->
          <div class="weather-type-select">
            <el-select
              v-model="weatherType"
              placeholder="选择气象类型"
              @change="searchWeather"
            >
              <el-option
                label="实况天气"
                value="base"
              />
              <el-option
                label="预报天气"
                value="all"
              />
            </el-select>
          </div>
          
          <!-- 搜索按钮 -->
          <el-button
            type="primary"
            @click="searchWeather"
            :loading="loading"
            class="search-btn"
          >
            <i class="fas fa-search"></i>
            查询天气
          </el-button>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-loading
        element-loading-text="正在获取天气数据..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      />
    </div>

     <!-- 天气信息主体区域 -->
     <div v-if="!loading && currentWeatherInfo" class="weather-content">
       <!-- 当前天气概览卡片 -->
       <div class="current-weather-card">
         <div class="current-info">
           <div class="location-info">
             <h3 class="city-name">
               <i class="fas fa-location-dot"></i>
               {{ currentWeatherInfo.city || '未知城市' }}
             </h3>
             <p class="province">{{ currentWeatherInfo.province || '未知省份' }}</p>
             <p class="update-time">
               <i class="far fa-clock"></i>
               更新时间：{{ currentWeatherInfo.reportTime || '--' }}
             </p>
           </div>
           
           <div class="weather-status">
             <div class="status-info">
               <!-- 实况天气显示 -->
               <span v-if="currentWeatherInfo.type === 'live'" class="status-text">
                 {{ currentWeatherInfo.currentWeather || '晴' }}
               </span>
               <!-- 预报天气显示 -->
               <span v-else class="status-text">
                 {{ currentWeatherInfo.casts?.[0]?.dayWeather || '晴' }}
               </span>
               
               <div class="weather-icon">
                 <i :class="getWeatherIcon(currentWeatherInfo.type === 'live' ? currentWeatherInfo.currentWeather : currentWeatherInfo.casts?.[0]?.dayWeather)"></i>
                 <span class="weather-emoji">{{ getWeatherEmoji(currentWeatherInfo.type === 'live' ? currentWeatherInfo.currentWeather : currentWeatherInfo.casts?.[0]?.dayWeather) }}</span>
               </div>
             </div>
             
             <div class="temperature-info">
               <div class="temp-main">
                 <!-- 实况天气温度显示 -->
                 <span v-if="currentWeatherInfo.type === 'live'" class="current-temp">
                   {{ currentWeatherInfo.currentTemp || '--' }}°
                 </span>
                 <!-- 预报天气温度显示 -->
                 <span v-else class="current-temp">
                   {{ currentWeatherInfo.casts?.[0]?.dayTemp || '--' }}°
                 </span>
                 
                 <!-- 温度范围（仅预报天气显示） -->
                 <span v-if="currentWeatherInfo.type === 'forecast'" class="temp-range">
                   {{ currentWeatherInfo.casts?.[0]?.nightTemp || '--' }}° ~ {{ currentWeatherInfo.casts?.[0]?.dayTemp || '--' }}°
                 </span>
               </div>
             </div>
           </div>
         </div>
         
         <!-- 天气详细信息 -->
         <div class="weather-details">
           <!-- 实况天气详细信息 -->
           <template v-if="currentWeatherInfo.type === 'live'">
             <div class="detail-item">
               <div class="detail-icon">
                 <i class="fas fa-wind"></i>
               </div>
               <div class="detail-info">
                 <span class="detail-label">风向风力</span>
                 <span class="detail-value">
                   {{ currentWeatherInfo.windDirection || '--' }} {{ currentWeatherInfo.windPower || '--' }}
                 </span>
               </div>
             </div>
             
             <div class="detail-item">
               <div class="detail-icon">
                 <i class="fas fa-tint"></i>
               </div>
               <div class="detail-info">
                 <span class="detail-label">空气湿度</span>
                 <span class="detail-value">{{ currentWeatherInfo.humidity || '--' }}%</span>
               </div>
             </div>
             
             <div class="detail-item">
               <div class="detail-icon">
                 <i class="fas fa-thermometer-half"></i>
               </div>
               <div class="detail-info">
                 <span class="detail-label">实时温度</span>
                 <span class="detail-value">{{ currentWeatherInfo.currentTemp || '--' }}°C</span>
               </div>
             </div>
           </template>
           
           <!-- 预报天气详细信息 -->
           <template v-else>
             <div class="detail-item">
               <div class="detail-icon">
                 <i class="fas fa-wind"></i>
               </div>
               <div class="detail-info">
                 <span class="detail-label">风向风力</span>
                 <span class="detail-value">
                   {{ currentWeatherInfo.casts?.[0]?.dayWind || '--' }} {{ currentWeatherInfo.casts?.[0]?.dayPower || '--' }}级
                 </span>
               </div>
             </div>
             
             <div class="detail-item">
               <div class="detail-icon">
                 <i class="fas fa-moon"></i>
               </div>
               <div class="detail-info">
                 <span class="detail-label">夜间天气</span>
                 <span class="detail-value">{{ currentWeatherInfo.casts?.[0]?.nightWeather || '--' }}</span>
               </div>
             </div>
             
             <div class="detail-item">
               <div class="detail-icon">
                 <i class="fas fa-compass"></i>
               </div>
               <div class="detail-info">
                 <span class="detail-label">夜间风向</span>
                 <span class="detail-value">
                   {{ currentWeatherInfo.casts?.[0]?.nightWind || '--' }} {{ currentWeatherInfo.casts?.[0]?.nightPower || '--' }}级
                 </span>
               </div>
             </div>
           </template>
         </div>
       </div>

       <!-- 天气预报列表（仅预报天气模式显示） -->
       <div class="forecast-section" v-if="currentWeatherInfo.type === 'forecast' && currentWeatherInfo.casts && currentWeatherInfo.casts.length > 0">
         <h3 class="section-title">
           <i class="fas fa-calendar-alt"></i>
           未来天气预报
         </h3>
         
         <div class="forecast-cards">
           <div
             v-for="(cast, index) in currentWeatherInfo.casts"
             :key="index"
             class="forecast-card"
             :class="{ 'active': index === 0 }"
           >
             <div class="forecast-date">
               <div class="date-info">
                 <span class="date">{{ formatDate(cast.date) }}</span>
                 <span class="week">{{ cast.week }}</span>
               </div>
             </div>
             
             <div class="forecast-weather">
               <div class="weather-icon-small">
                 <i :class="getWeatherIcon(cast.dayWeather)"></i>
                 <span class="weather-emoji-small">{{ getWeatherEmoji(cast.dayWeather) }}</span>
               </div>
               <div class="weather-info">
                 <div class="weather-desc">
                   <span class="day-weather">{{ cast.dayWeather }}</span>
                   <span class="night-weather">{{ cast.nightWeather }}</span>
                 </div>
                 <div class="temp-range">
                   <span class="temp-high">{{ cast.dayTemp }}°</span>
                   <span class="temp-divider">~</span>
                   <span class="temp-low">{{ cast.nightTemp }}°</span>
                 </div>
               </div>
             </div>
             
             <div class="forecast-wind">
               <div class="wind-info">
                 <span class="wind-direction">{{ cast.dayWind }}</span>
                 <span class="wind-power">{{ cast.dayPower }}级</span>
               </div>
             </div>
           </div>
         </div>
       </div>

       <!-- 天气统计图表区域（仅预报天气模式显示） -->
       <div class="charts-section" v-if="currentWeatherInfo.type === 'forecast'">
         <div class="chart-container">
           <h3 class="chart-title">
             <i class="fas fa-chart-line"></i>
             温度趋势图
           </h3>
           <div ref="temperatureChart" class="chart"></div>
         </div>
       </div>
    </div>

    <!-- 无数据状态 -->
    <div v-if="!loading && !currentWeatherInfo" class="no-data">
      <div class="no-data-content">
        <i class="fas fa-cloud-rain"></i>
        <h3>暂无天气数据</h3>
        <p>请输入城市名称查询天气信息</p>
      </div>
    </div>

    <!-- 错误状态 -->
    <div v-if="error" class="error-state">
      <div class="error-content">
        <i class="fas fa-exclamation-triangle"></i>
        <h3>获取天气数据失败</h3>
        <p>{{ error }}</p>
        <el-button type="primary" @click="searchWeather">重新获取</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick, computed, watch } from 'vue'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'
import axios from 'axios'

 // ======================== 响应式数据定义 ========================
 /** 搜索的城市名称 */
 const searchCity = ref<string>('北京')

/** 气象类型：base-实况天气，all-预报天气 */
const weatherType = ref<string>('all')

/** 加载状态 */
const loading = ref<boolean>(false)

/** 错误信息 */
const error = ref<string>('')

/** 天气数据 */
const weatherData = ref<any>(null)

/** 温度图表容器引用 */
const temperatureChart = ref<HTMLDivElement | null>(null)

// ======================== 计算属性 ========================
/**
 * 统一处理的天气数据
 * 根据当前选择的气象类型（实况/预报）返回对应的数据结构
 */
const currentWeatherInfo = computed(() => {
  if (!weatherData.value) return null
  
  // 实况天气数据处理
  if (weatherType.value === 'base' && weatherData.value.lives && weatherData.value.lives.length > 0) {
    const live = weatherData.value.lives[0]
    return {
      type: 'live',
      city: live.city,
      province: live.province,
      reportTime: live.reporttime,
      currentWeather: live.weather,
      currentTemp: live.temperature,
      windDirection: live.winddirection,
      windPower: live.windpower,
      humidity: live.humidity
    }
  }
  
  // 预报天气数据处理
  if (weatherType.value === 'all' && weatherData.value.forecast) {
    return {
      type: 'forecast',
      city: weatherData.value.forecast.city,
      province: weatherData.value.forecast.province,
      reportTime: weatherData.value.forecast.reportTime,
      casts: weatherData.value.forecast.casts || []
    }
  }
  
  return null
})

 // ======================== 接口数据类型定义 ========================
 interface WeatherCast {
   date: string          // 日期，如："2025-09-20"
   week: string          // 星期，如："6"
   dayWeather: string    // 白天天气，如："大雨"
   nightWeather: string  // 夜间天气，如："大雨"
   dayTemp: string       // 白天温度，如："26"
   nightTemp: string     // 夜间温度，如："23"
   dayWind: string       // 白天风向，如："东"
   nightWind: string     // 夜间风向，如："东"
   dayPower: string      // 白天风力，如："5"
   nightPower: string    // 夜间风力，如："5"
 }
 
 interface WeatherForecast {
   city: string          // 城市名称，如："广州"
   adcode: string        // 城市编码，如："440100"
   province: string      // 省份，如："广东"
   reportTime: string    // 报告时间，如："2025-09-20 10:30:42"
   casts: WeatherCast[]  // 天气预报数组
 }

 // 实况天气数据结构
 interface WeatherLive {
   province: string      // 省份，如："广东"
   city: string          // 城市名称，如："广州"
   adcode: string        // 城市编码，如："440100"
   weather: string       // 天气现象，如："晴"
   temperature: string   // 实时温度，如："27"
   winddirection: string // 风向，如："西北"
   windpower: string     // 风力级别，如："≤3"
   humidity: string      // 空气湿度，如："65"
   reporttime: string    // 数据发布的时间，如："2025-09-20 16:00:00"
 }
 
 interface WeatherResponse {
   message: string
   code: number
   data: {
     status: string
     count: string
     info: string
     infocode: string
     lives: WeatherLive[]       // 实况天气数组
     forecast: WeatherForecast  // 预报天气
   }
 }

// ======================== 工具函数 ========================
/**
 * 根据天气描述获取对应的图标类名
 * @param weather 天气描述
 * @returns 图标类名
 */
const getWeatherIcon = (weather: string): string => {
  if (!weather) return 'fas fa-sun'
  
  const iconMap: Record<string, string> = {
    '晴': 'fas fa-sun',
    '多云': 'fas fa-cloud-sun',
    '阴': 'fas fa-cloud',
    '小雨': 'fas fa-cloud-rain',
    '中雨': 'fas fa-cloud-rain',
    '大雨': 'fas fa-cloud-showers-heavy',
    '暴雨': 'fas fa-cloud-bolt',
    '雷阵雨': 'fas fa-bolt',
    '雪': 'fas fa-snowflake',
    '雾': 'fas fa-smog',
    '霾': 'fas fa-smog'
  }
  
  // 模糊匹配
  for (const key in iconMap) {
    if (weather.includes(key)) {
      return iconMap[key]
    }
  }
  
  return 'fas fa-cloud'
}

/**
 * 获取天气对应的Emoji表情，作为图标的备选方案
 * @param weather 天气描述
 * @returns Emoji表情
 */
const getWeatherEmoji = (weather: string): string => {
  if (!weather) return '☀️'
  
  const emojiMap: Record<string, string> = {
    '晴': '☀️',
    '多云': '⛅',
    '阴': '☁️',
    '小雨': '🌦️',
    '中雨': '🌧️',
    '大雨': '🌧️',
    '暴雨': '⛈️',
    '雷阵雨': '⚡',
    '雪': '❄️',
    '雾': '🌫️',
    '霾': '😷'
  }
  
  // 模糊匹配
  for (const key in emojiMap) {
    if (weather.includes(key)) {
      return emojiMap[key]
    }
  }
  
  return '☁️'
}

/**
 * 格式化日期显示
 * @param dateStr 日期字符串，如："2025-09-20"
 * @returns 格式化后的日期，如："09/20"
 */
const formatDate = (dateStr: string): string => {
  if (!dateStr) return '--'
  
  try {
    const date = new Date(dateStr)
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    return `${month}/${day}`
  } catch {
    return dateStr
  }
}

// ======================== API调用函数 ========================
/**
 * 搜索天气数据
 * 调用后端天气API接口获取指定城市的天气信息
 */
const searchWeather = async () => {
  // 参数验证
  if (!searchCity.value.trim()) {
    ElMessage.warning('请输入城市名称')
    return
  }
  
  loading.value = true
  error.value = ''
  
  try {
    // 构建请求参数
    const params = {
      city: searchCity.value.trim(),
      extensions: weatherType.value,
      output: 'JSON'
    }
    
    // 调用后端天气API接口
    const response = await axios.get('/api/GaoDeWeather', { params })
    
    // 处理响应数据
    if (response.data.code === 200) {
      weatherData.value = response.data.data
      ElMessage.success('天气数据获取成功')
      // 图表绘制由 watch 监听器处理
    } else {
      throw new Error(response.data.message || '获取天气数据失败')
    }
  } catch (err: any) {
    console.error('获取天气数据失败:', err)
    error.value = err.response?.data?.message || err.message || '网络请求失败，请稍后重试'
    ElMessage.error(error.value)
    weatherData.value = null
  } finally {
    loading.value = false
  }
}

// ======================== 图表绘制函数 ========================
 /**
  * 绘制温度趋势图表
  * 使用ECharts展示未来几天的温度变化趋势
  */
 const drawTemperatureChart = () => {
   if (!temperatureChart.value || !currentWeatherInfo.value || currentWeatherInfo.value.type !== 'forecast' || !currentWeatherInfo.value.casts || currentWeatherInfo.value.casts.length === 0) {
     console.log('无法绘制图表：缺少必要数据或DOM元素')
     return
   }
   
   console.log('开始绘制温度趋势图表', currentWeatherInfo.value)
   
   // 准备图表数据
   const dates = currentWeatherInfo.value.casts.map((cast: WeatherCast) => formatDate(cast.date))
   const dayTemps = currentWeatherInfo.value.casts.map((cast: WeatherCast) => parseInt(cast.dayTemp) || 0)
   const nightTemps = currentWeatherInfo.value.casts.map((cast: WeatherCast) => parseInt(cast.nightTemp) || 0)
  
  // 初始化图表
  const chart = echarts.init(temperatureChart.value)
  
  // 配置图表选项
  const option = {
    backgroundColor: 'transparent',
    title: {
      text: '未来天气温度趋势',
      left: 'center',
      textStyle: {
        color: '#2d3436',
        fontSize: 16,
        fontWeight: 'normal'
      },
      subtextStyle: {
        color: '#636e72'
      }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderWidth: 0,
      textStyle: {
        color: '#2d3436'
      },
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: 'rgba(0, 0, 0, 0.2)',
          width: 1
        },
        shadowStyle: {
          color: 'rgba(0, 0, 0, 0.1)'
        },
        crossStyle: {
          color: '#999'
        }
      },
      formatter: (params: any) => {
        let result = `<div style="font-weight:bold;margin-bottom:5px;">${params[0].axisValue}</div>`
        params.forEach((param: any) => {
          const color = param.seriesName === '白天温度' ? '#ff7875' : '#40a9ff'
          result += `<div style="display:flex;justify-content:space-between;align-items:center;margin:3px 0;">
            <span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${color};"></span>
            <span style="flex:1;">${param.seriesName}:</span>
            <span style="font-weight:bold;margin-left:15px;">${param.value}°C</span>
          </div>`
        })
        return result
      }
    },
    legend: {
      data: ['白天温度', '夜间温度'],
      textStyle: {
        color: '#2d3436'
      },
      icon: 'circle',
      itemWidth: 10,
      itemHeight: 10,
      bottom: '5%'
    },
    xAxis: {
      type: 'category',
      data: dates,
      boundaryGap: false,
      axisPointer: {
        type: 'shadow'
      },
      axisLine: {
        lineStyle: {
          color: '#dfe6e9'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#636e72',
        fontSize: 12,
        formatter: (value: string) => {
          return value
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '温度(°C)',
      nameTextStyle: {
        color: '#636e72',
        align: 'right'
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#636e72',
        fontSize: 12,
        formatter: '{value}°C'
      },
      splitLine: {
        lineStyle: {
          color: '#f0f0f0',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '白天温度',
        type: 'line',
        data: dayTemps,
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          color: '#ff7875',
          width: 4,
          shadowColor: 'rgba(255, 120, 117, 0.5)',
          shadowBlur: 10
        },
        itemStyle: {
          color: '#ff7875',
          borderColor: '#fff',
          borderWidth: 2
        },
        emphasis: {
          itemStyle: {
            borderWidth: 3,
            shadowColor: 'rgba(255, 120, 117, 0.7)',
            shadowBlur: 10
          }
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(255, 120, 117, 0.5)' },
              { offset: 1, color: 'rgba(255, 120, 117, 0.05)' }
            ]
          }
        }
      },
      {
        name: '夜间温度',
        type: 'line',
        data: nightTemps,
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          color: '#40a9ff',
          width: 4,
          shadowColor: 'rgba(64, 169, 255, 0.5)',
          shadowBlur: 10
        },
        itemStyle: {
          color: '#40a9ff',
          borderColor: '#fff',
          borderWidth: 2
        },
        emphasis: {
          itemStyle: {
            borderWidth: 3,
            shadowColor: 'rgba(64, 169, 255, 0.7)',
            shadowBlur: 10
          }
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(64, 169, 255, 0.5)' },
              { offset: 1, color: 'rgba(64, 169, 255, 0.05)' }
            ]
          }
        }
      }
    ],
    grid: {
      left: '5%',
      right: '5%',
      bottom: '15%',
      top: '15%',
      containLabel: true
    },
    animation: true
  }
  
  // 设置图表配置并启用响应式
  chart.setOption(option)
  
  // 监听窗口大小变化，自动调整图表大小
  const resizeHandler = () => {
    chart.resize()
  }
  window.addEventListener('resize', resizeHandler)
  
  // 在组件卸载时移除事件监听器
  onUnmounted(() => {
    window.removeEventListener('resize', resizeHandler)
  })
}

// ======================== 生命周期钩子 ========================
/**
 * 组件挂载后自动获取默认城市的天气数据
 */
onMounted(() => {
  // 自动搜索默认城市的天气
  searchWeather()
})

/**
 * 监听天气数据变化，更新图表
 */
watch(currentWeatherInfo, (newValue) => {
  if (newValue && newValue.type === 'forecast') {
    nextTick(() => {
      drawTemperatureChart()
    })
  }
}, { deep: true })
</script>

<style scoped>
/* ======================== 全局样式 ======================== */
.weather-dashboard {
  min-height: 100vh;
  background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
  padding: 20px;
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
}

/* ======================== 头部区域样式 ======================== */
.header-section {
  margin-bottom: 30px;
}

.search-container {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.title {
  margin: 0 0 20px 0;
  color: #2d3436;
  font-size: 28px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}

.title i {
  color: #74b9ff;
  font-size: 32px;
}

.search-controls {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 200px;
}

.search-input :deep(.el-input) {
  height: 44px;
}

.search-input :deep(.el-input__wrapper) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.weather-type-select {
  min-width: 140px;
}

.weather-type-select :deep(.el-select) {
  width: 100%;
}

.weather-type-select :deep(.el-input__wrapper) {
  height: 44px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-btn {
  height: 44px;
  padding: 0 24px;
  border-radius: 12px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

.search-btn i {
  margin-right: 6px;
}

/* ======================== 加载状态样式 ======================== */
.loading-container {
  height: 400px;
  position: relative;
}

/* ======================== 主要内容区域样式 ======================== */
.weather-content {
  display: grid;
  gap: 24px;
}

/* ======================== 当前天气卡片样式 ======================== */
.current-weather-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.current-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

.location-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.city-name {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  color: #2d3436;
  display: flex;
  align-items: center;
  gap: 12px;
}

.city-name i {
  color: #ff7675;
  font-size: 32px;
}

.province {
  margin: 0;
  font-size: 18px;
  color: #636e72;
  font-weight: 500;
}

.update-time {
  margin: 0;
  font-size: 14px;
  color: #b2bec3;
  display: flex;
  align-items: center;
  gap: 6px;
}

.weather-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.status-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.status-text {
  font-size: 24px;
  font-weight: 600;
  color: #2d3436;
}

.weather-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #74b9ff, #0984e3);
  border-radius: 50%;
  color: white;
  font-size: 28px;
  position: relative;
}

.weather-emoji {
  position: absolute;
  font-size: 32px;
  opacity: 0;
  transition: opacity 0.3s;
}

/* 当Font Awesome图标加载失败时显示Emoji */
.weather-icon i:not(.fa):not(.fas):not(.far):not(.fab) + .weather-emoji,
.weather-icon i.fa-ban + .weather-emoji,
.weather-icon i.fa-times + .weather-emoji {
  opacity: 1;
}

.temperature-info {
  text-align: right;
}

.current-temp {
  font-size: 72px;
  font-weight: 300;
  color: #2d3436;
  line-height: 1;
}

.temp-range {
  display: block;
  font-size: 18px;
  color: #636e72;
  margin-top: 8px;
}

/* ======================== 天气详细信息样式 ======================== */
.weather-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(116, 185, 255, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(116, 185, 255, 0.2);
}

.detail-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #74b9ff, #0984e3);
  border-radius: 50%;
  color: white;
  font-size: 20px;
}

.detail-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-label {
  font-size: 14px;
  color: #636e72;
  font-weight: 500;
}

.detail-value {
  font-size: 16px;
  color: #2d3436;
  font-weight: 600;
}

/* ======================== 预报列表样式 ======================== */
.forecast-section {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.section-title {
  margin: 0 0 24px 0;
  font-size: 24px;
  font-weight: 600;
  color: #2d3436;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-title i {
  color: #74b9ff;
  font-size: 20px;
}

.forecast-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.forecast-card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  padding: 24px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
}

.forecast-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.forecast-card.active {
  border-color: #74b9ff;
  background: rgba(116, 185, 255, 0.1);
}

.forecast-date {
  margin-bottom: 16px;
}

.date-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.date {
  font-size: 18px;
  font-weight: 600;
  color: #2d3436;
}

.week {
  font-size: 14px;
  color: #636e72;
  padding: 4px 8px;
  background: rgba(116, 185, 255, 0.2);
  border-radius: 6px;
}

.forecast-weather {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.weather-icon-small {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #74b9ff, #0984e3);
  border-radius: 50%;
  color: white;
  font-size: 20px;
  position: relative;
}

.weather-emoji-small {
  position: absolute;
  font-size: 24px;
  opacity: 0;
  transition: opacity 0.3s;
}

/* 当Font Awesome图标加载失败时显示Emoji */
.weather-icon-small i:not(.fa):not(.fas):not(.far):not(.fab) + .weather-emoji-small,
.weather-icon-small i.fa-ban + .weather-emoji-small,
.weather-icon-small i.fa-times + .weather-emoji-small {
  opacity: 1;
}

.weather-info {
  flex: 1;
}

.weather-desc {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.day-weather {
  font-size: 16px;
  font-weight: 600;
  color: #2d3436;
}

.night-weather {
  font-size: 14px;
  color: #636e72;
}

.temp-range {
  display: flex;
  align-items: center;
  gap: 6px;
}

.temp-high {
  font-size: 18px;
  font-weight: 600;
  color: #ff7675;
}

.temp-divider {
  color: #b2bec3;
}

.temp-low {
  font-size: 16px;
  color: #74b9ff;
}

.forecast-wind {
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.wind-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wind-direction {
  font-size: 14px;
  color: #636e72;
}

.wind-power {
  font-size: 14px;
  font-weight: 600;
  color: #2d3436;
}

/* ======================== 图表区域样式 ======================== */
.charts-section {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.chart-container {
  width: 100%;
}

.chart-title {
  margin: 0 0 24px 0;
  font-size: 24px;
  font-weight: 600;
  color: #2d3436;
  display: flex;
  align-items: center;
  gap: 12px;
}

.chart-title i {
  color: #74b9ff;
  font-size: 20px;
}

.chart {
  width: 100%;
  height: 400px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.05);
  padding: 10px;
}

/* ======================== 状态页面样式 ======================== */
.no-data, .error-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.no-data-content, .error-content {
  text-align: center;
  color: white;
}

.no-data-content i, .error-content i {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.8;
}

.no-data-content h3, .error-content h3 {
  font-size: 24px;
  margin: 0 0 8px 0;
  font-weight: 600;
}

.no-data-content p, .error-content p {
  font-size: 16px;
  margin: 0 0 20px 0;
  opacity: 0.8;
}

/* ======================== 响应式设计 ======================== */
@media (max-width: 768px) {
  .weather-dashboard {
    padding: 16px;
  }
  
  .search-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-input, .weather-type-select {
    min-width: 100%;
  }
  
  .current-info {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .weather-status {
    align-items: flex-start;
  }
  
  .current-temp {
    font-size: 48px;
  }
  
  .city-name {
    font-size: 28px;
  }
  
  .forecast-cards {
    grid-template-columns: 1fr;
  }
  
  .weather-details {
    grid-template-columns: 1fr;
  }
}

/* ======================== 图标字体引入 ======================== */
@import url('https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css');
</style>
